<template>
  <div class="layout_one">
    {{ title }}
    <VetSwitch />
    <!-- <VetContextMenu /> -->

    <div
      style="width: 50px; height: 150px; border: solid 1px red"
      v-contextMenu="menu"
    >
    </div>
  </div>
</template>
  
<script lang="ts">
import {
  defineAsyncComponent,
  defineComponent,
  reactive,
  toRefs,
} from "vue";

export default defineComponent({
  name: "XueXiao",
  components: {
    VetSwitch: defineAsyncComponent(() => import("@/vet/vetSwtich/index.vue")),
    VetContextMenu: defineAsyncComponent(
      () => import("@/vet/vetContextMenu/index.vue")
    ),
  },
  setup() {
    const state = reactive({
      title: "这是学校",
      menu: {
        text: ["a", "b", "c", "d"],
        handler: {
          handlerA() {
            console.log("a");
          },
          handlerB() {
            console.log("b");
          },
          handlerC() {
            console.log("c");
          },
          handlerD() {
            console.log("d");
          },
        },
      },
    });

    return {
      ...toRefs(state),
    };
  },
});
</script>
  
<style lang="scss" scoped>
</style>